<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/GridManager.css}">
	<script type="text/javascript" th:src="@{/js/GridManager.js}" ></script>
    <title>GridManager:使用静态数据渲染</title>
    <style>
		html, body{
			width: 100%;
			height: 100%;
			overflow-x:hidden;
			margin: 0;
			padding: 0;
		}
        h2{
            font-size:22px;
            padding:10px 30px;
            color:#333;
        }
        p{
            font-size:14px;
            padding:10px 30px;
            color:#333;
            text-indent:2em;
			margin: 0;
        }
        hr{
            margin-top: 18px;
            margin-bottom: 18px;
            border: 0;
            border-top: 1px solid #eee;
        }
    </style>
</head>

<body>
	<br/>
	<div style="width:95%;margin:0px auto;">
	</div>
	<table grid-manager="cccc"></table>
	<br/>
	<hr/>
	<button id="reset-gm" style="margin-left:100px;margin-bottom:10px;padding:5px 10px;display: none;">更换GridManage数据</button>
<script type="text/javascript">

	// 创建方法
	document.getElementById('reset-gm').style.display = 'inline-block';
	var ajaxData1 = {
		"data":[
			{
				"name": "baukh",
				"age": "28",
				"createDate": "2015-03-12",
				"info": "野生前端程序",
				"operation": "修改"
			},
			{
				"name": "baukh",
				"age": "28",
				"createDate": "2015-03-12",
				"info": "野生前端程序",
				"operation": "修改"
			},
			{
				"name": "baukh",
				"age": "28",
				"createDate": "2015-03-12",
				"info": "野生前端程序",
				"operation": "修改"
			},
			{
				"name": "baukh",
				"age": "28",
				"createDate": "2015-03-12",
				"info": "野生前端程序",
				"operation": "修改"
			},
			{
				"name": "baukh",
				"age": "28",
				"createDate": "2015-03-12",
				"info": "野生前端程序",
				"operation": "修改"
			},{
				"name": "baukh",
				"age": "28",
				"createDate": "2015-03-12",
				"info": "野生前端程序",
				"operation": "修改"
			},
			{
				"name": "baukh",
				"age": "28",
				"createDate": "2015-03-12",
				"info": "野生前端程序",
				"operation": "修改"
			},
			{
				"name": "baukh",
				"age": "28",
				"createDate": "2015-03-12",
				"info": "野生前端程序",
				"operation": "修改"
			}
		],
		"totals": 8
	};
	var table = document.querySelector('table[grid-manager]');
	table.GM({
		supportRemind: true
		,height: 'auto'
		,i18n:'zh-cn'
		,textConfig:{
			'page-go': {
				'zh-cn':'跳转',
				'en-us':'Go '
			}
		}
		,supportSetTop: true
		,gridManagerName:'aaa'
		,disableCache:true
		,disableOrder:false
		,supportSorting: true
		,supportDrag:true
		,supportAjaxPage:true
		,emptyTemplate: '<div class="gm-emptyTemplate">什么也没有</div>'
		,ajax_data : ajaxData1
		,isCombSorting: false
		,pageSize:20
		,query: {ex: '用户自定义的查询参数,格式:{key:value}'}
		,columnData: [{
			key: 'name',
			remind: 'the username',
			sorting: 'up',
			width: '200px',
			text: 'username'
		},{
			key: 'age',
			remind: 'the age',
			sorting: '',
			width: '200px',
			text: 'age'
		},{
			key: 'createDate',
			remind: 'the createDate',
			sorting: 'down',
			width: '200px',
			text: 'createDate'
		},{
			key: 'info',
			remind: 'the info',
			sorting: '',
			text: 'info'
		},{
			key: 'operation',
			remind: 'the operation',
			sorting: '',
			width: '100px',
			text: 'operation',
			template: function(operation, rowObject){  //operation:当前key所对应的单条数据；rowObject：单个一行完整数据
				return '<a href=javascript:alert("这是一个按纽");>'+operation+'</a>';
			}
		}
		]
		,pagingBefore:function(query){
			console.log('Event: 分页前', query);
		}
		,pagingAfter: function(query){
			console.log('Event: 分页后', query);
		}
		,sortingBefore:function(query){
			console.log('Event: 排序前', query);
		}
		,sortingAfter: function(query){
			console.log('Event: 排序后', query);
		}
		,ajax_success: function(data){
			console.log('Event: ajax_success', data);
		}
	}, function(query){
		// 渲染完成后的回调函数
		console.log(query);
	});
	// 日期格式化,不是插件的代码,只用于处理时间格式化
	Date.prototype.format = function(fmt){
		var o = {
			"M+": this.getMonth() + 1, //月份
			"D+": this.getDate(), //日
			"d+": this.getDate(), //日
			"H+": this.getHours(), //小时
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/([Y,y]+)/.test(fmt)){
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		}
		for (var k in o){
			if(new RegExp("(" + k + ")").test(fmt)){
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			}
		}
		return fmt;
	};

	// 修改数据方法
	document.getElementById('reset-gm').onclick = function(){
		var ajaxData2 = {
			"data":[
				{
					"name": "baukh",
					"age": "28",
					"createDate": "2015-03-12",
					"info": "野生前端程序",
					"operation": "修改"
				},
				{
					"name": "baukh",
					"age": "28",
					"createDate": "2015-03-12",
					"info": "野生前端程序",
					"operation": "修改"
				},
				{
					"name": "baukh",
					"age": "28",
					"createDate": "2015-03-12",
					"info": "野生前端程序",
					"operation": "修改"
				},
				{
					"name": "baukh",
					"age": "28",
					"createDate": "2015-03-12",
					"info": "野生前端程序",
					"operation": "修改"
				}
			],
			"totals": 4
		};
		document.querySelector('table[grid-manager]').GM('setAjaxData', ajaxData2);
	};

</script>

</body>
</html>
